<!--  -->
<template>
<div class=''>
    <crumb  title="首页" title2="订单管理" title3="订单列表"></crumb >
     <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            clearable
            v-model="queryInfo.query"
            @clear="getData"
          >
            <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="dialogVisible = true">添加订单</el-button>
        </el-col>
      </el-row>

      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="order_number" label="名称"> </el-table-column>
          <el-table-column prop="order_price" label="价格"> </el-table-column>
          <el-table-column prop="is_send" label="是否付款"> 
            <template slot-scope="scope">
              <el-tag v-if="scope.row.pay_status==1" type="success" >已付款</el-tag>
              <el-tag v-else type="danger">未付款</el-tag>
              </template>
          </el-table-column>
           <el-table-column prop="is_send" label="是否发货"> </el-table-column>
          <el-table-column prop="create_time" label="时间">
              <template slot-scope="scope">
                {{scope.row.create_time | formatDate}}
                </template>
             </el-table-column>
          <!-- <div class="time">{{item.rateTime | formatDate}}</div> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleUpate(scope.row)"
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
 uersname: "",
      dialogVisible: false,
      tableData: [],
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 3,
      },
      total: 0,
      rules: {
        goods_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
      }
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
      handleSizeChange(size) {
      this.queryInfo.pagenum = 1;
      this.queryInfo.pagesize = size;
      this.getData();
    },
    handleCurrentChange(num) {
      this.queryInfo.pagenum = num;
      this.getData();
    },
 async getData() {
      const { data: res } = await this.myaxios.get("orders", {
        params: this.queryInfo,
      });
      // console.log(res);
      this.tableData = res.data.goods;
      this.total = res.data.total;
    console.log(res)
    this.$message({
          message: '获取数据成功',
          type: 'success'
        });
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getData();
   
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>